<template>
	<div class="evaluate-wrap">
		<!-- 头部 -->
		<div class="tops">
			<div class="tops-left">
				<p class="p1">5.0</p>
				<p class="p2">综合评分</p>
				<p class="p3">高于周边商家96%</p>
			</div>
			<div class="tops-right">
				<div class="service">
					<span>服务态度</span>
					<van-rate
						v-model="value1"
						allow-half
						void-icon="star"
						color="#F19D3B"
						void-color="#eee"
						:size="18"
						:readonly="true"
					/>
					<span class="score">4.5</span>
				</div>
				<div class="cuisine">
					<span>菜品质量</span>
					<van-rate
						v-model="value2"
						allow-half
						void-icon="star"
						color="#F19D3B"
						void-color="#eee"
						:size="18"
						:readonly="true"
					/>
					<span class="score">4.5</span>
				</div>
				<p>送达时间<span class="times">20分钟</span></p>
			</div>
		</div>

		<!-- 留言 -->
		<div class="messages">
			<van-tabs type="card" @click="handleToggle">
				<van-tab :title="`全部${allList.length}`"></van-tab>
				<van-tab :title="`满意${satisfaction.length}`"></van-tab>
				<van-tab :title="`不满意${dissatisfaction.length}`"></van-tab>
			</van-tabs>

			<div
				class="messages-card"
				v-for="(item, index) in commenData"
				:key="index"
			>
				<img :src="item.avatar" />

				<div class="card-content">
					<div class="first">
						<span> {{ item.username }} </span>
						<span>
							{{ item.rateTime | formatYMDhms }}
						</span>
					</div>
					<div class="second">
						<van-rate
							v-model="item.score"
							:size="18"
							color="#ffd21e"
							void-icon="star"
							void-color="#eee"
							allow-half
							:readonly="true"
						/>
						<span v-if="item.deliveryTime">
							{{ item.deliveryTime }}分钟送达
						</span>
					</div>
					<div class="third">
						<p>{{ item.text }}</p>
					</div>
					<div class="fourth">
						<van-icon name="good-job-o" />
						<div>
							<span v-for="(v, i) in item.recommend" :key="i">
								{{ v }}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { api_shop_ratings } from "@/apis/shop";

	export default {
		data() {
			return {
				value1: 4.5,
				value2: 4.5,
				num: 24,
				allList: [],
				satisfaction: [],
				dissatisfaction: [],
				commenData: [],
			};
		},
		async created() {
			await this.getEvaluate();
			this.commenData = this.allList;
		},
		methods: {
			async getEvaluate() {
				const res = await api_shop_ratings();
				// console.log(res);
				if (res.data.errno === 0) {
					this.allList = res.data.data;
					let satis = res.data.data.filter(function (v) {
						if (v.score > 3) {
							return v;
						}
					});
					let disnot = res.data.data.filter(function (v) {
						if (v.score <= 3) {
							return v;
						}
					});
					this.satisfaction = satis;
					this.dissatisfaction = disnot;
				}
			},
			handleToggle(name) {
				// console.log(name);
				if (name == 1) {
					this.commenData = this.satisfaction;
				} else if (name == 0) {
					this.commenData = this.allList;
				} else {
					this.commenData = this.dissatisfaction;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.evaluate-wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow-y: scroll;
		// overflow: hidden;
		&::-webkit-scrollbar {
			width: 0;
		}
		.tops {
			display: flex;
			padding-left: 20px;
			padding-bottom: 20px;
			padding-top: 20px;
			margin: 0 0 20px 0;
			border-bottom: 20px solid #f4f5f7;
			border-top: 1px solid #f4f5f7;
			.tops-left {
				text-align: center;
				margin-right: 35px;
				&::after {
					display: block;
					content: "";
					height: 74px;
					width: 1px;
					background-color: #f1f2f3;
					position: absolute;
					top: 213px;
					left: 134px;
				}
				.p1 {
					color: #f5c444;
					font-weight: bold;
					font-size: 24px;
				}
				.p2 {
					margin: 8px 0;
					font-size: 14px;
				}
				.p3 {
					font-size: 12px;
					color: #9c9c9b;
				}
			}

			.tops-right {
				font-size: 14px;
				.van-rate {
					margin: 0 10px;
				}
				.cuisine {
					margin: 8px 0;
				}
				.score {
					color: #f5c444;
				}
				.times {
					color: #9c9c9b;
					margin-left: 10px;
				}
			}
		}

		// 留言
		.messages {
			::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
				color: #181818;
				background-color: #f5c444;
			}
			::v-deep .van-tabs__nav--card .van-tab {
				color: #f5c444;
				border-right: 1px solid #f5c444;
			}
			::v-deep .van-tabs__nav--card {
				border: 1px solid #f5c444;
			}
			::v-deep .van-tabs__nav--card .van-tab:last-child {
				border-right: none;
			}
			// 留言
			.messages-card {
				padding: 20px 10px;
				border-bottom: 1px solid rgba(128, 128, 128, 0.2);
				display: flex;
				img {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
				.card-content {
					margin-left: 10px;
					flex: 1;
					.first {
						display: flex;
						justify-content: space-between;

						& span:nth-child(2) {
							color: rgba(128, 128, 128, 0.7);
						}
					}
					.second {
						margin: 8px 0;
						span {
							margin-left: 20px;
							font-size: 14px;
							color: rgba(128, 128, 128, 0.7);
						}
					}
					.third {
						p {
							font-size: 14px;
						}
					}
					.fourth {
						display: flex;

						margin-top: 15px;
						.van-icon {
							color: rgb(255, 195, 0);
							font-size: 30px;
						}
						div {
							margin-left: 10px;
							display: flex;
							flex-wrap: wrap;
							span {
								border: 1px solid rgba(128, 128, 128, 0.5);
								padding: 3px;
								color: rgba(128, 128, 128, 0.7);
								font-size: 12px;
								margin: 2px;
							}
						}
					}
				}
			}
		}
	}
</style>
